<template>
  <Navbar title="资产" />
  <div class="user bg-dollar">
    <div class="panel"></div>
    <div class="box2">
      <ul class="g-tabHeader">
        <li class="item" v-for="item in tabs" :key="item.key" :class="{on: item.key == active}" @click="handleEvent(item.key)">{{ item.title }}</li>
      </ul>
      <div>
        <div class="van-pull-refresh">
          <div class="van-pull-refresh__track" style="transition-duration: 0ms;">
            <div class="van-pull-refresh__head"></div>
            <div role="feed" class="list van-list">
              <div class="van-list__placeholder"></div>
          </div>
        </div>
      </div>
      <div class="g-noData">
        <img src="../../assets/imgs/no-data.png" alt="">
      </div>
    </div>
  </div>
</div></template>
<script setup>
import { ref, reactive } from 'vue'
import Navbar from '../../components/Navbar/index.vue'

const active = ref('enter')
const tabs = reactive([
  {
    title: '入金详情',
    key: 'enter'
  },
  {
    title: '出金详情',
    key: 'out'
  }
])
const handleEvent = (key) => {
  active.value = key
}

</script>

<style scoped lang='scss'>
.user {
  padding-top: 2.875rem;
  height: 100vh;
  .g-tabHeader {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .item {
      flex: 1;
      text-align: center;
      line-height: 2.8125rem;
      font-size: 1rem;
      font-weight: 800;
      height: 2.8125rem;
      color: #fff;
      white-space: nowrap;
      cursor: pointer;
      border: 1px solid #eee;
      margin: 0.625rem;
      &.on {
        color: #347034;
        position: relative;
        background-color: #ffa845;
        border: 1px solid #ffa845;
        color: #fff;
      }
    }
  }
  .g-noData {
    font-size: 0.75rem;
    color: #93969b;
    text-align: center;
    line-height: 2.5rem;
    font-size: 0.875rem;
    min-height: 25vh;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    img {
      display: block;
      margin: 0 auto 5px;
      width: 120px;
    }
  }
}
</style>